CSS @property: Behersk definition og validering af brugerdefinerede egenskabstyper

I det konstant udviklende landskab inden for webudvikling kræver det at være på forkant, at man omfavner nye teknologier og teknikker, der forbedrer effektivitet, vedligeholdelse og den overordnede brugeroplevelse. CSS custom properties, også kendt som CSS-variabler, har revolutioneret den måde, vi administrerer og kontrollerer styles på. Med introduktionen af @property at-rule får CSS et endnu mere kraftfuldt værktøj: evnen til at definere og validere disse brugerdefinerede egenskaber, hvilket fører til mere robust og forudsigelig styling.

Hvad er CSS @property?

@property at-rule giver udviklere mulighed for at definere typen, syntaksen og andre karakteristika for brugerdefinerede egenskaber. Tænk på det som en måde at give struktur og validering til dine CSS-variabler. Før @property var CSS-variabler i bund og grund bare tekststrenge, der kunne indeholde hvad som helst. Denne mangel på struktur kunne føre til fejl, hvilket gjorde fejlfinding mere udfordrende og hindrede den overordnede designkonsistens. @property løser disse problemer ved at give en mekanisme til at kontrollere de typer værdier, der kan tildeles dine brugerdefinerede egenskaber.

Hvorfor bruge CSS @property? Fordele og fordele

Fordelene ved at bruge @property er talrige og bidrager direkte til forbedrede webudviklingspraksisser:

• Forbedret kodevedligeholdelse: Ved eksplicit at definere typerne og adfærden for brugerdefinerede egenskaber, gør du din kode mere selv-dokumenterende og lettere at forstå. Andre udviklere (eller dit fremtidige jeg) vil hurtigt forstå, hvordan en brugerdefineret egenskab er tænkt til at blive brugt.
• Forbedret designkonsistens: Validering sikrer, at kun gyldige værdier tildeles brugerdefinerede egenskaber. Dette hjælper med at opretholde et ensartet visuelt udseende på tværs af din hjemmeside eller applikation.
• Robusthed og fejlforebyggelse: Ugyldige værdier vil blive afvist, hvilket forhindrer uventede stylingproblemer og reducerer den tid, der bruges på fejlfinding.
• Dynamisk styling: @property muliggør bedre integration med JavaScript, hvilket giver dig mulighed for programmatisk at kontrollere og opdatere dine CSS-variabler med tillid, velvidende at værdierne er gyldige.
• Bedre autocompletion og udvikleroplevelse: Kodeeditorer kan give mere intelligent autocompletion og kode-hints, hvilket hjælper udviklere med at skrive CSS hurtigere og mere præcist.
• Optimeret ydeevne: Selvom ydeevne-påvirkningen generelt er lille, kan validering undertiden føre til mindre optimeringer fra browseren.

Kernekomponenter i @property-reglen

@property at-rule består af flere nøglekomponenter, der definerer, hvordan en brugerdefineret egenskab opfører sig.

--property-name

Dette er navnet på den brugerdefinerede egenskab, du definerer. Det skal starte med to bindestreger (--), som er standard for CSS custom properties.

            @property --my-color { ... }
            

              
                Copy
              
            
          

syntax

syntax-beskrivelsen definerer den tilladte type eller mønster for værdierne af den brugerdefinerede egenskab. Den bruger en delmængde af CSS-syntaksen og kan antage forskellige værdier, herunder:

• <color>: Repræsenterer en farveværdi (f.eks. red, #FF0000, rgba(255, 0, 0, 1)).
• <length>: Repræsenterer en længdeværdi (f.eks. 10px, 5em, 20%).
• <number>: Repræsenterer en numerisk værdi (f.eks. 10, 3.14).
• <percentage>: Repræsenterer en procentværdi (f.eks. 50%).
• <url>: Repræsenterer en URL (f.eks. url('image.jpg')).
• <integer>: Repræsenterer en heltalsværdi (f.eks. 10, -5).
• <angle>: Repræsenterer en vinkelværdi (f.eks. 45deg, 0.5turn).
• <time>: Repræsenterer en tidsværdi (f.eks. 2s, 200ms).
• <string>: Repræsenterer en strengværdi.
• <image>: Repræsenterer en billedværdi (samme som url).
• *: Accepterer enhver gyldig CSS-værdi. Dette er en meget eftergivende tilgang og bør bruges med forsigtighed.
• Kombinerede typer: Du kan kombinere flere typer ved hjælp af mellemrumsseparerede lister (f.eks. <length> <length> <length> for at definere tre længdeværdier) eller bruge '|'-symbolet for at tillade en af de listede typer (f.eks. <length> | <percentage> for at understøtte enten en længde eller en procentdel).
• Brugerdefinerede syntakser: Brugerdefinerede syntakser, for mere komplekse scenarier, understøttes ofte af brugerdefinerede implementeringer, selvom disse typisk vil blive beskrevet ved hjælp af regex-lignende syntaks såsom [a-z]+.

            
@property --base-color {
  syntax: <color>;
  inherits: false;
  initial-value: #333;
}

            

              
                Copy
              
            
          

inherits

inherits-beskrivelsen bestemmer, om den brugerdefinerede egenskab arver sin værdi fra sit forældreelement. Som standard arver brugerdefinerede egenskaber ikke. Denne adfærd kan styres med en boolesk værdi: true eller false.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 16px;
}

            

              
                Copy
              
            
          

initial-value

initial-value-beskrivelsen angiver standardværdien for den brugerdefinerede egenskab, hvis den ikke er eksplicit defineret i CSS. Dette giver en fallback-værdi, når egenskaben ikke er specificeret, svarende til adfærden for standard CSS-egenskaber.

            
@property --border-width {
  syntax: <length>;
  inherits: false;
  initial-value: 1px;
}

            

              
                Copy
              
            
          

Praktiske eksempler

Lad os dykke ned i nogle praktiske eksempler for at illustrere, hvordan man bruger @property effektivt.

Eksempel 1: Definition af en farveegenskab

I dette eksempel definerer vi en brugerdefineret egenskab --primary-color til at repræsentere en primær farve i vores designsystem. Vi specificerer, at den kun accepterer farveværdier.

            
@property --primary-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

body {
  --primary-color: #007bff; /* Gyldig */
  color: var(--primary-color);
}

h1 {
  --primary-color: rgb(255, 0, 0); /* Gyldig */
  color: var(--primary-color);
}

            

              
                Copy
              
            
          

Eksempel 2: Definition af en længdeegenskab

Her definerer vi en brugerdefineret egenskab --spacing til at styre afstanden mellem elementer, som accepterer længdeværdier. Dette eksempel demonstrerer tydeligt værdien af at sætte en `initial-value` som en standard for hele siden. Dette er især nyttigt, når man bruger et designsystem, hvor standardafstande er defineret.

            
@property --spacing {
  syntax: <length>;
  inherits: false;
  initial-value: 1rem;
}

p {
  margin-bottom: var(--spacing);
}

            

              
                Copy
              
            
          

Eksempel 3: Definition af en heltalsegenskab

Dette eksempel definerer en brugerdefineret egenskab for antallet af kolonner i et grid-layout og validerer, at værdien er et heltal.

            
@property --grid-columns {
  syntax: <integer>;
  inherits: false;
  initial-value: 3;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

            

              
                Copy
              
            
          

Eksempel 4: Egenskabsnedarvning

Her definerer vi en brugerdefineret egenskab, der *vil* blive nedarvet. Egenskaben `font-size` sat til `1rem` på body vil påvirke alle dens børn, medmindre den tilsidesættes.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 1rem;
}

body {
  --font-size: 1rem;
  font-size: var(--font-size);
}

h2 {
  font-size: 1.25rem; /* Tilsidesætter nedarvet værdi */
}

            

              
                Copy
              
            
          

Eksempel 5: Kombination af typer

Ved hjælp af '|'-operatoren kan vi kombinere typer. Her accepterer vi enten en `length` eller en `percentage` for skyggeforskydningen.

            
@property --shadow-offset {
  syntax: <length> | <percentage>;
  inherits: false;
  initial-value: 0;
}

.box {
  box-shadow: 0 var(--shadow-offset) var(--shadow-offset) gray;
}

            

              
                Copy
              
            
          

Bedste praksis for brug af @property

For at maksimere fordelene ved @property, følg disse bedste praksisser:

• Definer egenskaber på et centralt sted: Grupper dine @property-definitioner i en dedikeret CSS-fil eller sektion, ofte øverst i dit hovedstylesheet eller i en designsystemfil. Dette fremmer organisation og gør det nemt at administrere dine brugerdefinerede egenskaber.
• Brug beskrivende egenskabsnavne: Vælg navne, der tydeligt angiver formålet med hver brugerdefineret egenskab (f.eks. --primary-button-color, --header-font-size). Dette forbedrer læsbarheden og forståelsen.
• Giv omfattende dokumentation: Dokumenter dine brugerdefinerede egenskaber, herunder deres syntaks, brug og eventuelle begrænsninger. Denne dokumentation kan inkluderes i form af kommentarer ved siden af din CSS eller i en separat stilguide.
• Vælg den rigtige syntaks: Vælg omhyggeligt den passende syntax for hver egenskab. Brug af den korrekte syntaks forhindrer fejl og sikrer, at de tildelte værdier er gyldige.
• Overvej nedarvning omhyggeligt: Beslut, om en egenskab skal arve sin værdi fra sit forældreelement. Dette afhænger af egenskabens natur, og hvordan den skal anvendes på tværs af dit design.
• Brug initial-value strategisk: Sæt en initial-value for alle brugerdefinerede egenskaber, der kræver en standardværdi. Dette giver en fallback og sikrer, at stilen anvendes, selvom egenskaben ikke er eksplicit angivet.
• Udnyt designsystemer: Integrer @property i dit designsystem for at opretholde konsistens og forbedre dit teams udviklingsworkflow. Ved at bruge det i forbindelse med andre komponenter bygger du mere robuste og modulære designs, hvilket ofte er målet, når du opretter komponenter til global brug.
• Test grundigt: Test dine brugerdefinerede egenskaber og deres adfærd på tværs af forskellige browsere og enheder for at sikre kompatibilitet og en ensartet brugeroplevelse. Test på tværs af browsere er et kritisk trin, da understøttelsen af `property` endnu ikke er universelt implementeret.

Browserkompatibilitet

Pr. 26. oktober 2023 varierer understøttelsen af @property at-rule på tværs af browsere. Chrome, Edge og Safari har god understøttelse, mens Firefox-understøttelse er i en begrænset tilstand. Konsulter altid ressourcer som Can I Use ([https://caniuse.com/mdn-css_at-rules_property](https://caniuse.com/mdn-css_at-rules_property)) for at holde dig opdateret om browserkompatibilitet.

Vigtige overvejelser for browserkompatibilitet:

• Funktionsdetektering: Brug funktion-detekteringsteknikker til at håndtere browsere, der ikke understøtter @property, på en elegant måde. Du kan bruge en CSS-egenskabskontrol eller JavaScript-funktionsdetektering til at anvende alternative styles eller polyfills.
• Progressive Enhancement: Design din hjemmeside med en grundlæggende styling, der fungerer uden @property. Forbedr derefter gradvist designet ved at tilføje @property-understøttelse til kompatible browsere.
• Polyfills og Fallbacks: Overvej at bruge polyfills eller levere fallbacks for browsere, der ikke fuldt ud understøtter @property. Dette kan indebære brug af almindelige CSS-variabler eller forbehandling ved hjælp af SASS, LESS eller andre metoder.

Brug af CSS @property med JavaScript

En af de største fordele ved CSS custom properties er deres evne til at blive manipuleret med JavaScript, hvilket muliggør dynamisk styling og forbedrede brugeroplevelser. @property forbedrer denne evne og gør integrationen mellem CSS og JavaScript endnu mere kraftfuld og forudsigelig.

Her er, hvordan du kan interagere med brugerdefinerede egenskaber defineret med @property i JavaScript:

1. Hentning af en brugerdefineret egenskabsværdi: Brug getPropertyValue() til at hente værdien af en brugerdefineret egenskab.

               
   const element = document.querySelector('.my-element');
   const primaryColor = getComputedStyle(element).getPropertyValue('--primary-color');
   console.log(primaryColor); // f.eks. "#007bff"
   
               
   
                 
                   Copy
                 
               
             

2. Indstilling af en brugerdefineret egenskabsværdi: Brug setProperty() til at indstille værdien af en brugerdefineret egenskab. På grund af syntax-parameteren i `@property`-definitionen kan JavaScript-baseret indstilling udløse validering af værdien i browseren.

               
   element.style.setProperty('--primary-color', 'green');
   
               
   
                 
                   Copy
                 
               
             

Eksempel: Dynamisk farveændring med JavaScript

Lad os illustrere, hvordan man skaber en dynamisk farveændring ved hjælp af JavaScript og @property.

HTML:

            
<button class="my-button">Change Color</button>

            

              
                Copy
              
            
          

CSS:

            
@property --button-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

.my-button {
  background-color: var(--button-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

            

              
                Copy
              
            
          

JavaScript:

            
const button = document.querySelector('.my-button');

button.addEventListener('click', () => {
  const newColor = 'red'; // Kunne være baseret på en form for logik/input
  button.style.setProperty('--button-color', newColor);
});

            

              
                Copy
              
            
          

I dette eksempel ændrer et klik på knappen baggrundsfarven på knappen ved at ændre den brugerdefinerede egenskab --button-color ved hjælp af JavaScript.

Internationalisering (i18n) og CSS @property

CSS @property kan være et værdifuldt værktøj til at skabe webapplikationer, der understøtter forskellige sprog og lokaliseringer. Her er, hvordan det kan anvendes til i18n:

• Typografi: Definer brugerdefinerede egenskaber for skriftstørrelser, linjehøjder og skrifttypefamilier, så du kan tilpasse tekstens udseende baseret på det valgte sprog.
• Layout: Brug egenskaber for afstand, margener og polstring til at imødekomme variationer i tekstretning (f.eks. venstre-til-højre vs. højre-til-venstre) og forskellige tegnbredder.
• Farver: Anvend egenskaber for farver på UI-elementer, såsom knapfarver, tekstfarver og baggrundsfarver. Disse kan justeres for at stemme overens med kulturelle præferencer eller designretningslinjer for specifikke regioner.
• Tekstretning: Brug en brugerdefineret egenskab til at styre tekstretningen (f.eks. ltr, rtl) og ændre layoutet i overensstemmelse hermed.

Eksempel: Tilpasning af skriftstørrelser baseret på sprog

I dette eksempel demonstrerer vi, hvordan man tilpasser skriftstørrelsen på overskrifter i henhold til det valgte sprog. Tilgangen ville bruge et JavaScript-bibliotek til at bestemme det passende sprog og indstille brugerdefinerede egenskaber.

            
@property --heading-font-size {
  syntax: <length>;
  inherits: false;
  initial-value: 2rem;
}

h1 {
  font-size: var(--heading-font-size);
}

            

              
                Copy
              
            
          

Indstil derefter værdien dynamisk i JavaScript baseret på det detekterede sprog:

            
// Antager en global variabel eller funktion til at hente brugerens sprog
const userLanguage = getUserLanguage();
const heading = document.querySelector('h1');

if (userLanguage === 'ja') {
  heading.style.setProperty('--heading-font-size', '1.8rem'); // Juster for japansk
} else {
  heading.style.setProperty('--heading-font-size', '2rem'); // Standard
}

            

              
                Copy
              
            
          

Overvejelser om tilgængelighed

Når du arbejder med @property, er det vigtigt at have tilgængelighed i tankerne:

• Farvekontrast: Sørg for tilstrækkelig farvekontrast mellem tekst og baggrunde. Brug brugerdefinerede egenskaber for farver for nemt at opdatere designet for at opfylde kontrastkrav.
• Tekststørrelse: Tillad brugere at kontrollere tekststørrelsen. Brug relative enheder (rem, em) og brugerdefinerede egenskaber for at gøre skalering af skrifttyper let.
• Fokusindikatorer: Tilpas fokusindikatorer for at gøre dem tydeligt synlige. Brug brugerdefinerede egenskaber til at styre farven og stilen på fokus-outlines.
• ARIA-attributter: Sørg for, at elementer har de passende ARIA-attributter, når du bruger brugerdefinerede egenskaber til at styre tilstande eller adfærd.
• Tastaturnavigation: Bekræft, at din hjemmeside er let at navigere på med et tastatur, især hvis brugerdefinerede egenskaber bruges til at administrere interaktive elementer.

Overvejelser og løsninger på tværs af browsere

Selvom @property er et kraftfuldt værktøj, skal du huske, at browserunderstøttelsen endnu ikke er universelt implementeret. Du bør anvende teknikker på tværs af browsere for at mindske virkningen af manglende understøttelse.

• Progressive Enhancement: Design din styling med grundlæggende CSS-variabler, og brug derefter `@property` til ekstra funktioner i understøttede browsere.
• Funktionsdetektering: Brug funktion-detekteringsmetoder til at afgøre, om en browser understøtter @property, før du anvender styles, der bruger det. En simpel kontrol kan udføres ved hjælp af JavaScript.
• CSS Fallbacks: Angiv fallback-værdier for egenskaber, der ikke understøttes. Dette kan gøres ved at indstille egenskaber direkte eller ved at bruge forskellige variabler for understøttede og ikke-understøttede browsere.
• Præprocessorer: Brug CSS-præprocessorer som Sass eller Less til at oversætte strukturer på højere niveau til standard CSS, der kan bruges i browsere, der ikke har fuld `@property`-understøttelse. Selvom dette introducerer et ekstra trin, opvejer fordelene ofte ulemperne.

Eksempel på en CSS Fallback:

            
.element {
  --base-color: #333; /* Standardværdi for browsere uden @property */
  color: var(--base-color);
}

@supports (color: --base-color) { /* Funktionsdetektering for @property */
  @property --base-color {
    syntax: <color>;
    inherits: false;
    initial-value: #333;
  }
  /* Tilføj mere kompleks styling her, der udnytter @property */
}

            

              
                Copy
              
            
          

Værktøjer og biblioteker

Forskellige værktøjer og biblioteker kan hjælpe med at arbejde med @property:

• PostCSS Plugins: Plugins som `postcss-custom-properties` og `postcss-custom-properties-experimental` kan hjælpe med at transformere brugerdefinerede egenskaber og give understøttelse til ældre browsere ved at konvertere `@property`-definitioner til tilsvarende CSS-regler.
• Stylelint: Integrer stylelint og brugerdefinerede regler eller plugins for at validere brugen og strukturen af dine brugerdefinerede egenskaber.
• Designsystem-frameworks: Integrer @property i populære designsystem-frameworks som Ant Design, Material UI og Bootstrap for at sikre designkonsistens og give udviklere en mere gnidningsfri oplevelse.

Konklusion

CSS @property er en kraftfuld tilføjelse til webudviklerens værktøjskasse, der bringer struktur, validering og dynamiske funktioner til brugerdefinerede egenskaber. Ved at definere typen og adfærden af dine CSS-variabler kan du forbedre kodens vedligeholdelse, forbedre designkonsistensen og skabe mere robuste og forudsigelige styling-løsninger.

Efterhånden som browserunderstøttelsen forbedres, bliver det stadig vigtigere at indarbejde @property i dine projekter. Ved at omfavne de bedste praksisser, der er beskrevet i denne vejledning, kan du udnytte fordelene ved denne nye funktion og skrive mere effektiv, vedligeholdelsesvenlig og skalerbar CSS. Omfavn @property, og transformer dit webudviklingsworkflow!

Yderligere læsning

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1
• Can I Use: @property